import React, {Fragment, useEffect, useRef, useState} from "react";
import {Form, Modal, Input, message} from "antd";

type Props = {
    visible: boolean
    data?: object
    onSuccess: (res?: any) => void
    onCancel: () => void
}

const initialState = {
    showModifyPwdModal: false,
    confirmLoading: false,
};

const ModifyPwdModal = ({visible, onSuccess, onCancel}: Props) => {

    const [state, setState] = useState(initialState);
    // const [confirmLoading, setConfirmLoading]
    const [form] = Form.useForm();

    function handleSubmitForm() {
        // debugger;
        const values = form.getFieldsValue();
        setState({showModifyPwdModal: false, confirmLoading: true});
        message.info(JSON.stringify(values));
        setTimeout(() => {
            setState({showModifyPwdModal: false, confirmLoading: false});
            onSuccess();
        }, 1000)


    }

    useEffect(() => {
        if (!visible) form.resetFields()
    }, [visible]);

    return (

        <Fragment>
            <Modal
                title="修改密码"
                visible={visible}
                getContainer={false}
                onOk={handleSubmitForm}
                confirmLoading={state.confirmLoading}
                onCancel={onCancel}
                centered
                forceRender
                maskClosable={false}
                destroyOnClose
            >
                <div className="modal-content">
                    <Form
                        name="forgetPwd"
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="用&ensp;户&ensp;名"
                            name="username"
                            rules={[{required: true, message: 'Please input your username!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="旧&ensp;密&ensp;码"
                            name="oldPwd"
                            rules={[{required: true, message: 'Please input your password!'}]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item
                            label="新&ensp;密&ensp;码"
                            name="newPwd"
                            rules={[{required: true, message: 'Please input your password!'}]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="verifyPwd"
                            rules={[{required: true, message: 'Please input your password!'}]}
                        >
                            <Input.Password/>
                        </Form.Item>


                    </Form>

                </div>


            </Modal>
        </Fragment>
    );
}

export default ModifyPwdModal;
